.audio-box {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    background-color: #eee;
    margin-top: 100px;
    margin-left: 80px;
    width: 164px;
    height: 170px;
}
.audio-item {
    width: 26px;
    background-color: #3B7EEE;
    border-radius: 13px;
}
.animation {
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-play-state: running;
}
.audio-item:first-child {
    height: 54px;
    animation-name: audio-item1;
}
.audio-item:nth-child(2) {
    height: 140px;
    animation-name: audio-item2;
}
.audio-item:nth-child(3) {
    height: 70px;
    animation-name: audio-item3;
}
.audio-item:last-child {
    height: 170px;
    animation-name: audio-item4;
}

/* 最低到最高 */
@keyframes audio-item1 {
    to {
        height: 100%;
    }
}
/* 中间到最低 */
@keyframes audio-item2 {
    to {
        height: calc(100% * .3);
    }
}
/* 中间到最高 */
@keyframes audio-item3 {
    to {
        height: 100%;
    }
}
/* 最高到最低 */
@keyframes audio-item4 {
    to {
        height: calc(100% * .3);
    }
}


@keyframes bounce {
    0% {
        background-color: royalblue;
        margin-top: 0;
    }
    100% {
        background-color: yellow;
        margin-top: 40%;
    }
}